<!--
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2020-11-23 17:28:13
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-11-24 11:47:12
-->
<template>
    <div class="main-content-right">
        <div>
            <div class="title">个人信息修改</div>
            <el-form
                ref="ruleForm"
                :rules="rules"
                :model="userInfo"
                label-width="80px"
                label-position="left"
                style="width:400px"
            >
                <el-form-item label="名字" prop="nicheng">
                    <el-input
                        placeholder="请输入名字"
                        v-model="userInfo.nicheng"
                    ></el-input>
                </el-form-item>
                <el-form-item label="学号" prop="student_number">
                    <el-input
                        placeholder="请输入学号"
                        v-model="userInfo.student_number"
                    ></el-input>
                </el-form-item>
                <el-form-item label="账号">
                    <el-input disabled v-model="userInfo.username"></el-input>
                </el-form-item>

                <el-form-item label="性别" prop="sex">
                    <el-select
                        v-model="userInfo.sex"
                        placeholder="请选择性别"
                        style="width:320px"
                    >
                        <el-option label="男" :value="1"></el-option>
                        <el-option label="女" :value="2"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="地区" prop="addressValue">
                    <el-cascader
                        v-model="userInfo.addressValue"
                        :options="addressOptions"
                        @change="handleChange"
                        placeholder="请选择学校地区"
                        style="width:320px"
                    ></el-cascader>
                </el-form-item>

                <el-form-item label="版本" prop="textbook">
                    <el-select
                        v-model="userInfo.textbook"
                        placeholder="请选择版本"
                        style="width:320px"
                    >
                        <el-option
                            v-for="item in visionOptions"
                            :key="item.textbook"
                            :label="item.textbookName"
                            :value="item.textbook"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="学校" prop="schoolValue">
                    <el-select
                        v-model="userInfo.schoolValue"
                        placeholder="请选择学校"
                        style="width:320px"
                    >
                        <el-option
                            v-for="item in schoolOptions"
                            :key="item.school_id"
                            :label="item.school_name"
                            :value="item.school_id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="年级" prop="grade">
                    <el-select
                        v-model="userInfo.grade"
                        placeholder="请选择年级"
                        style="width:320px"
                    >
                        <el-option
                            v-for="item in gradeOptions"
                            :key="item.grade"
                            :label="item.grade_name"
                            :value="item.grade"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="班级" prop="class_name">
                    <el-input
                        placeholder="请输入班级"
                        v-model="userInfo.class_name"
                    ></el-input>
                </el-form-item>

                <el-form-item label="班主任" prop="class_Instructor">
                    <el-input
                        placeholder="请输入班主任姓名"
                        v-model="userInfo.class_Instructor"
                    ></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button
                        type="primary"
                        @click="updateUserInfo('ruleForm')"
                        >完成修改</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
        <div class="rightBox">
            <div class="avatarTitle">头像</div>
            <el-upload
                class="avatar-uploader"
                action="/"
                :show-file-list="false"
                :http-request="uploadAvatar"
            >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </div>
    </div>
</template>

<script>
import getCityData from "@/utils/getCityData";
import { getExpectSchool, getTextbookList } from "@/api/perfect/perfect";
import { getUserInfo, updateUserBasic } from "@/api/login/index";
import { UploadUserImg } from "@/api/upload/index";
import util from "@/utils/utilsTools";
export default {
    data() {
        return {
            gradeOptions: util.getStage(999), //年级
            visionOptions: [], //版本
            schoolOptions: [], //学校
            addressOptions: getCityData(), //地区数据
            imageUrl: "",
            userInfo: {},
            //验证
            rules: {
                nicheng: [
                    {
                        required: true,
                        message: "请输入名字",
                        trigger: "blur"
                    }
                ],
                student_number: [
                    {
                        required: true,
                        message: "请输入学号",
                        trigger: "blur"
                    }
                ],
                sex: [
                    {
                        required: true,
                        message: "请选择性别",
                        trigger: "change"
                    }
                ],
                addressValue: [
                    {
                        required: true,
                        message: "请选择地区",
                        trigger: "change"
                    }
                ],
                textbook: [
                    {
                        required: true,
                        message: "请选择版本",
                        trigger: "change"
                    }
                ],
                schoolValue: [
                    {
                        required: true,
                        message: "请选择学校",
                        trigger: "change"
                    }
                ],
                grade: [
                    {
                        required: true,
                        message: "请选择年级",
                        trigger: "change"
                    }
                ],
                class_name: [
                    {
                        required: true,
                        message: "请输入班级",
                        trigger: "blur"
                    }
                ],
                class_Instructor: [
                    {
                        required: true,
                        message: "请输入班主任姓名",
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    created() {
        this.UserInfo();
        this.getbookList();
    },
    methods: {
        handleChange(value) {
            console.log(value);
            this.userInfo.schoolValue = "";
            this.getSchool();
        },
        async UserInfo() {
            var query = {
                k_token: this.$store.getters.k_token
            };
            var list = await getUserInfo(query);
            console.log("用户信息", list);
            if (list.code == 200) {
                this.userInfo = list.data;

                if (list.data.area_id == 0 || !list.data.area_id) {
                    var index1 = this.addressOptions.findIndex(el1 => {
                        return el1.value == list.data.provinec_id;
                    });

                    var index2 = this.addressOptions[index1].children.findIndex(
                        el2 => {
                            return el2.value == list.data.city_id;
                        }
                    );
                    this.userInfo.addressValue = [
                        list.data.provinec_id + "",
                        list.data.city_id + "",
                        this.addressOptions[index1].children[index2].children[0]
                            .value
                    ];
                } else {
                    this.userInfo.addressValue = [
                        list.data.provinec_id + "",
                        list.data.city_id + "",
                        list.data.area_id + ""
                    ];
                }
                this.userInfo.schoolValue = list.data.schoolid;
                this.imageUrl = list.data.avatar;
                this.getSchool();
            }
        },
        async getSchool() {
            var query = {
                provinec_id: this.userInfo.addressValue[0],
                city_id: this.userInfo.addressValue[1],
                school_type: 1
            };
            var data = await getExpectSchool(query);
            console.log("学校列表：", data);
            this.schoolOptions = data.data;
        },
        async getbookList() {
            var query = {};
            var data = await getTextbookList(query);
            console.log("版本列表：", data);
            this.visionOptions = data.data;
        },
        async uploadAvatar(item) {
            let formData = new FormData();
            formData.append("file", item.file);
            formData.append("k_token", this.$store.getters.k_token);

            var list = await UploadUserImg(formData);
            if (list.code == 200) {
                this.imageUrl = list.data.visit_path;
            } else {
                this.$message.error(list.msg + "上传失败");
            }
            console.log("上传头像：", list);
        },
        updateUserInfo(formName) {
            if (this.imageUrl == "") {
                return this.$message.error("请选择头像");
            }
            this.$refs[formName].validate(async valid => {
                if (valid) {
                    var education = "";
                    if (this.userInfo.grade <= 6) {
                        education = 6;
                    } else if (this.userInfo.grade <= 9) {
                        education = 9;
                    } else {
                        education = 12;
                    }
                    var query = {
                        avatar: this.imageUrl,
                        nicheng: this.userInfo.nicheng,
                        student_number: this.userInfo.student_number,
                        sex: this.userInfo.sex,
                        provinec_id: this.userInfo.addressValue[0],
                        city_id: this.userInfo.addressValue[1],
                        area_id: this.userInfo.addressValue[3],
                        schoolid: this.userInfo.schoolValue,
                        grade: this.userInfo.grade,
                        education: education,
                        class_name: this.userInfo.class_name,
                        class_Instructor: this.userInfo.class_Instructor,
                        textbook: this.userInfo.textbook
                    };
                    var list = await updateUserBasic(query);
                    if (list.code == 200) {
                        this.$message({
                            type: "success",
                            customClass: "customClass",
                            message: "修改成功!"
                        });
                    }
                    console.log("修改用户信息：", list);
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        }
    }
};
</script>

<style scoped lang="scss">
.main-content-right {
    width: 98%;
    margin-left: 2%;
    min-height: 764px;
    min-width: 860px;
    padding: 20px 50px;
    background: #fff;
    box-sizing: border-box;
    display: flex;
    justify-content: space-evenly;
}

.title {
    font-size: 25px;
    font-weight: 600;
    color: #6b6969;
    margin: 20px 0 40px 0;
}

.rightBox {
    margin-top: 93px;

    .avatarTitle {
        margin-bottom: 10px;
    }
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}
.avatar {
    width: 100px;
    height: 100px;
    display: block;
}
</style>
